<!--
 * @Description: 文件描述
 * @Author: 1+
 * @Date: 2024-03-19 09:30:37
 * @LastEditors: 1+
 * @LastEditTime: 2024-08-29 17:51:57
-->
<!--
 * @Description: 文件描述
 * @Author: 1+
 * @Date: 2024-03-19 09:30:37
 * @LastEditors: 1+
 * @LastEditTime: 2024-08-28 17:47:33
-->
<template>
  <div class="content-config">
    <el-tabs v-if="isSelect" stretch>
      <el-tab-pane v-for="item in chartsTabList" :key="item.key">
        <span slot="label">{{ item.title }}</span>
        <component :is="item.render" />
      </el-tab-pane>
    </el-tabs>
    <!-- 页面配置 -->
    <div v-show="!isSelect">
      <el-upload
        action=""
        drag
        :http-request="customRequest"
        :before-upload="beforeUploadHandle"
        :show-file-list="false"
        style="margin-bottom: 20px"
      >
        <template>
          <img
            v-if="editCanvasConfig.backgroundImage"
            :src="editCanvasConfig.backgroundImage"
            class="upload-show"
          />
          <template v-else>
            <i
              class="el-icon-picture-outline-round"
              style="
                font-size: 67px;
                color: #c0c4cc;
                margin: 40px 0 16px;
                line-height: 50px;
              "
            />
            <div class="el-upload__text">请选择 png/jpg/gif 格式的背景图</div>
          </template>
        </template>
        <img src="" alt="" srcset="" />
      </el-upload>
      <el-form label-width="80px" label-position="left">
        <el-form-item label="尺寸">
          <div style="display: flex; gap: 10px">
            <el-input-number
              @change="computedScale"
              v-model="editCanvasConfig.width"
              :min="50"
              size="small"
              placeholder="宽度"
            />
            <el-input-number
              @change="computedScale"
              v-model="editCanvasConfig.height"
              :min="50"
              size="small"
              placeholder="高度"
            />
          </div>
        </el-form-item>
        <el-form-item label="背景颜色">
          <el-color-picker
            v-model="editCanvasConfig.background"
            size="small"
            show-alpha
            class="bg-color"
            :predefine="[
              '#232324',
              '#2a2a2b',
              '#313132',
              '#373739',
              '#757575',
              '#e0e0e0',
              '#eeeeee',
              '#fafafa',
            ]"
          />
        </el-form-item>
        <el-form-item label="背景控制">
          <el-button
            class="clear-btn"
            size="small"
            :disabled="!editCanvasConfig.backgroundImage"
            @click="clearImage"
          >
            清除背景
          </el-button>
          <el-button
            class="clear-btn"
            size="small"
            :disabled="!editCanvasConfig.background"
            @click="clearColor"
          >
            清除颜色
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapMutations, mapActions } from 'vuex'
export default {
  computed: {
    ...mapGetters(['targetChart', 'componentList', 'editCanvasConfig']),
    ...mapGetters('chartEdit', ['fetchTargetIndex']),
    isSelect () {
      const { selectId } = this.targetChart
      // 排除多个
      if (selectId.length !== 1) return undefined
      const target = this.componentList[this.fetchTargetIndex()]
      return target
    }
  },
  data () {
    return {
      tarIndex: null,
      chartsTabList: [
        {
          key: 'pageSetting',
          title: '定制',
          render: () => import('./components/ChartSetting')
        },
        {
          key: 'chartAnimation',
          title: '动画',
          render: () => import('./components/ChartAnimation')
        },
        {
          key: 'chartData',
          title: '数据',
          render: () => import('./components/ChartData')
        }
      ],
    }
  },
  methods: {
    ...mapActions('chartEdit', ['computedScale']),
    ...mapMutations('chartEdit', ['setEditCanvasConfig']),
    // 上传图片前置处理
    beforeUploadHandle (file) {
      const type = file.type
      if (type !== 'image/png' && type !== 'image/jpeg' && type !== 'image/gif') {
        this.$message.warning('文件格式不符合，请重新上传！')
        return false
      }
      return true
    },
    // 自定义上传操作
    customRequest ({ file }) {
      if (file) {
        const ImageUrl = URL.createObjectURL(file)
        this.setEditCanvasConfig({ key: 'backgroundImage', value: ImageUrl })
        this.setEditCanvasConfig({ key: 'selectColor', value: false })
      } else {
        this.$message.error('添加图片失败，请稍后重试！')
      }
    },
    // 清除背景
    clearImage () {
      this.setEditCanvasConfig({ key: 'backgroundImage', undefined })
      this.setEditCanvasConfig({ key: 'selectColor', value: true })
    },
    // 清除颜色
    clearColor () {
      this.setEditCanvasConfig({ key: 'background', value: undefined })
      if (this.editCanvasConfig.backgroundImage) {
        this.setEditCanvasConfig({ key: 'selectColor', value: false })
      }
      // switchSelectColorHandle()
    }
  }
}
</script>

<style lang="scss" scoped>
.content-config {
  height: 100%;
  padding: 10px;
  background-color: #f2f3f5;
  overflow: auto;
  &::-webkit-scrollbar {
      width: 3px;
    }
}
.upload-show {
  width: 100%;
  height: 193px;
  border-radius: 5px;
}
.bg-color {
  ::v-deep .el-color-picker__trigger {
    width: 250px;
  }
}
.clear-btn {
  padding-left: 2.25em;
  padding-right: 2.25em;
}
::v-deep {
  .el-upload,
  .el-upload-dragger {
    width: 100%;
  }
}
::v-deep {
  .el-color-picker__icon {
    display: none;
  }
  .el-button:hover {
    border-color: #47e0c4;
    background-color: #fff;
  }
  .el-form-item {
    margin-bottom: 10px;
  }
}
</style>